<template>
    <div>
        <el-card class="main" shadow="never" :body-style="{ padding: '0px' }">
        <el-row>
            <el-col :span="24">
                <div class="header"><p v-text="title" /></div>
            </el-col>
            <el-col :xs="24" :sm="24" :xl="12">
                <div class="size">
                    <img src="https://resource.smartisan.com/resource/a74b17fb442afa0a45111e4e65de3501.png" />
                </div>
            </el-col>
            <div v-if="list.length == 6 || list.lenght == 2">
                <el-col :xs="12" :sm="8" :xl="6" v-for="(item,index) in list" :key='index' >
                    <div class="size spec" @click="Jump(item.id)">
                        <el-image :src="item.goods_img" fit="fit"/>
                        <div>
                            <p class="title" v-text="item.goods_title" />
                            <p class="text" v-text="item.goods_text" />
                            <p class="price" v-text="'￥'+item.goods_price" />
                        </div>
                    </div>
                </el-col>
            </div>
        </el-row>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            m: 'hello world',
            i: 3,
            list: [
                {
                    id: '10001',
                    goods_title: '坚果31',
                    goods_text: '介绍',
                    goods_price: '2,899.00',
                    goods_img: 'https://resource.smartisan.com/resource/f195e666e089d4e3775ce67d8e9523ce.png'
                },
                {
                    id: '10003',
                    goods_title: '坚果35',
                    goods_text: '介绍2',
                    goods_price: '2,899.00',
                    goods_img: 'https://resource.smartisan.com/resource/a4c73e549097c7f5cf2c5e0d87e56d13.png'
                },
                {
                    id: '10004',
                    goods_title: '坚果36',
                    goods_text: '介绍',
                    goods_price: '2,899.00',
                    goods_img: 'https://resource.smartisan.com/resource/9934374dda26c292555dd1ec0887e17b.png'
                },
                {
                    id: '1005',
                    goods_title: '坚果38',
                    goods_text: '介绍3',
                    goods_price: '2,899.00',
                    goods_img: 'https://resource.smartisan.com/resource/f195e666e089d4e3775ce67d8e9523ce.png'
                },
                {
                    id: '1111',
                    goods_title: '坚果39',
                    goods_text: '介绍',
                    goods_price: '2,899.00',
                    goods_img: 'https://resource.smartisan.com/resource/9934374dda26c292555dd1ec0887e17b.png'
                },
                {
                    id: '10002',
                    goods_title: '坚果39',
                    goods_text: '介绍',
                    goods_price: '2,899.00',
                    goods_img: 'https://resource.smartisan.com/resource/9934374dda26c292555dd1ec0887e17b.png'
                },
            ],
        };
    },
    props: {
        title: String, // 标题
        // list: Array, // 数据列表
    },
    methods: {
        Jump(value = false) {
            // console.log(value)
            this.$router.push({ path:'/goods/info/'+value });
        }
    },
}
</script>

<style lang="less" scoped>
.main {
    border-radius: 8px;
}
.header {
    height: 36px;
    background: #fbfbfb;
    border-bottom-style: solid;
    border-bottom-width: 0.2px;
    border-bottom-color:#ddd;
    p {
        font-size: 20px;
        font-weight: bold;
        color: #484848;
        margin-left: 20px;
    }
}
.size {
    height: 400px;
    background: #fff;
/*
    border-style: solid;
    border-width: 0.01px;
    border-color:#ddd;
*/
    img {
        width: 100%;
        height: 450px;
    }
    p {
        text-align: center;
    }
    .title {
        font-weight: bold;
    }
    .text {
        color: #555;
        font-size: 12px;
    }
    .price {
        color: #ff4141;
        font-size: 16px;
        font-weight: bold;
    }

}
.size:hover {
   -webkit-box-shadow: #f1f1f1 0px 0px 20px inset;
   -moz-box-shadow: #f1f1f1 0px 0px 20px inset;
   box-shadow: #f1f1f1 0px 0px 20px inset;

}
.spec {
    padding: 10px;
    .el-image {
        width: 100%;
        height: 250px;
    }
}
</style>